<template>
  <div class="about">
    <div>异常处理</div>
    <div>
      {{msg}}
      {{error}}
      {{userinfo.student.name}}
      {{count}}
      <button @click="changeStore">改变状态</button>
    </div>
    <h1>vuex状态原始数据</h1>
    <div>
      <li v-for="(todo,index) in todos" :key="index">{{index+1}}、{{todo.todo}}</li>
    </div>
    <h1>vuex计算属性</h1>
    <div>
      <li v-for=" (done,index) in doneToos" :key="index">{{index+1}}、{{done.todo}}</li>
    </div>
    <hr>
    <div>模块2页面信息</div>
    <div class="div-table">
      <div class="div-header">
        <ul>
          <li v-for=" (user,index) in userInfo" :key="index">{{user}}</li>
        </ul>
      </div>
      <div>
        <ul>
          <li v-for=" (user,index) in userInfo" :key="index">{{user.age}}</li>
        </ul>
      </div>
      {{youself}}
      {{'cobweb-92bc-7e51a9630fa6'.length}}
    </div>
  </div>
</template>
<script>
  export default {
    name: 'temlpate',
    data() {
      return {
        msg: Number('ss').toFixed(1),
        error: name + '001',
        userinfo: {
          student: {
            name: '张三'
          }
        }
      };
    },
    methods: {
      changeStore() {
        // 获取可以调用的所有mutations
        // this.$store.commit(mutation.INCREMENT, {
        //   step: 3
        // });
        this.$store.dispatch('checkout', {
          step: 3
        });
      }
    },
    /**
     * 第一种取值方法
     *  自动匹配vuex中的属性
     **/
    computed: {
      count() {
        return this.$store.state.mb.count;
      },
      todos() {
        return this.$store.state.mb.todos;
      },
      doneToos() {
        console.log(this.$store);
        return this.$store.getters.doneToos;
      },
      userInfo() {
        return this.$store.state.ma.userinfo;
      },
      youself() {
        return this.$store.getters.youself;
      }
    }
    /**
     * 第二中取值方法
     * 根据mapState获取想要显示的值
     */
    // computed: mapState({
    //   count: state => state.count
    // })
    /**
     * 第三种取值方法
     */
    // computed: mapState([
    //   'count'
    // ])
    /**
     * 第四种取值方法
     */
    // computed: {
    //   ...mapState(['count', 'todos']),
    //   ...mapGetters(['doneToos'])
    // }

  };
</script>
